<template>
  <div class="foot-container" v-if="showFooterFlag">
    <div 
      :class="activeMenu === menuItem.menuTip ? 'foot-item foot-item-active' : 'foot-item'" 
      v-for="menuItem in menus" 
      :key="menuItem.menuTip"
      @click="handleClick(menuItem)">
      <svg><use :xlink:href="menuItem.icon"></use></svg>
      <span class="item-title">{{menuItem.title}}</span>
    </div>
  </div>
</template>

<script>
import Icons from "../assets/icons.svg";
export default {
  name: 'Footer',
  props: {},
  data() {
    return {
      homeIcon: `${Icons}#home`,
      videoIcon: `${Icons}#video`,
      subscribeIcon: `${Icons}#subscribe`,
      personalIcon: `${Icons}#personal`,
      activeMenu: "home",
      showFooterFlag: true,
      menus: [
        { menuTip: 'home', title: '首页', icon: `${Icons}#home`, url: '/home' },
        { menuTip: 'video', title: '视频', icon: `${Icons}#video`, url: '/video' },
        { menuTip: 'subscribe', title: '订阅', icon: `${Icons}#subscribe`, url: '/subscribe' },
        { menuTip: 'personal', title: '我的', icon: `${Icons}#personal`, url: '/personal' },
      ]
    }
  },
  methods: {
    handleClick(menuItem) {
      const { menuTip, url } = menuItem;
      this.activeMenu = menuTip;
      this.$router.push(url);
    }
  }
}
</script>

<style lang="less" scoped>
@import "~theme/flex.less";
.foot-container {
  width: 100%;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1px solid #f4f7f8;
  box-sizing: border-box;
  height: 15vw;
  background-color: #fff;
  #myFlex.rcs();
  box-shadow: 0 0 40px 0 rgba(0, 0, 0, 0.1);

  .foot-item {
    width: 25%;
    height: 100%;
    #myFlex.ccc();

    svg { width: 6vw; height: 6vw; margin-bottom: 1vw; fill: #333 }
    .item-title { 
      font-size: 13px; 
      letter-spacing: 2px; 
      color: #333;
    }
  }

  .foot-item-active {
    background-color: rgba(0, 0, 0, 0.04);
    svg { fill: #ec0000 }
    .item-title { color: #ec0000 }
  }
}
</style>